<template>
  <el-form
    :model="formSearchParams"
    :style="{ marginBottom: '20px' }"
    layout="inline"
  >
    <el-form-item field="theaterName" label="影院名称">
      <el-input
        v-model="formSearchParams.theaterName"
        placeholder="请输入影院名称"
        allow-clear
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="doSearch" style="width: 100px">
        搜索
      </el-button>
    </el-form-item>
  </el-form>
  <el-table :data="dataList" style="width: 100%">
    <el-table-column prop="id" label="id" />
    <el-table-column prop="theaterName" label="影院名称" />
    <el-table-column prop="theaterIcon" label="影院图片">
      <template #default="scope">
        <el-image
          :src="scope.row.movieIcon"
          fit="contain"
          style="width: 100px; height: 100px"
        />
      </template>
    </el-table-column>
    <el-table-column prop="theaterAddress" label="影院地址" />
    <el-table-column prop="updateTime" label="修改时间">
      <template #default="scope">
        {{ dayjs(scope.row.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
    </el-table-column>
    <el-table-column label="Operations" width="200px">
      <template #default="scope">
        <el-button
          type="primary"
          @click="router.push(`/add/theater/${scope.row.id}`)"
          >更新
        </el-button>
        <el-button type="primary" @click="doDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    :page-size="searchParams.pageSize"
    :current-page="searchParams.current"
    @size-change="onPageChange"
    @current-change="onPageChange"
    layout="prev, pager, next"
    :page-count="pageCount"
  />
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import API from "@/api";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { useRouter } from "vue-router";
import {
  deleteTheaterUsingPost,
  listTheaterByPageUsingPost,
} from "@/api/theaterController";

const formSearchParams = ref<API.TheaterQueryRequest>({});

// 初始化搜索条件（不应该被修改）
const initSearchParams = {
  current: 1,
  pageSize: 10,
};

const searchParams = ref<API.TheaterQueryRequest>({
  ...initSearchParams,
});
const dataList = ref<API.Theater[]>([]);
const pageCount = ref<number>(5);
const router = useRouter();
/**
 * 加载数据
 */
const loadData = async () => {
  const res = await listTheaterByPageUsingPost(searchParams.value);
  if (res.data.code === 0) {
    dataList.value = res.data.data?.records || [];
    pageCount.value = Math.ceil(
      (res.data.data?.total as number) / searchParams?.value?.pageSize ?? 5
    );
  } else {
    ElMessage({
      message: "操作失败，" + res.data.message,
      type: "error",
    });
  }
};

/**
 * 执行搜索
 */
const doSearch = () => {
  searchParams.value = {
    ...initSearchParams,
    ...formSearchParams.value,
  };
};

/**
 * 当分页变化时，改变搜索条件，触发数据加载
 * @param page
 */
const onPageChange = (page: number) => {
  searchParams.value = {
    ...searchParams.value,
    current: page,
  };
};

/**
 * 删除
 * @param record
 */
const doDelete = async (record: API.Movie) => {
  if (!record.id) {
    return;
  }

  const res = await deleteTheaterUsingPost({
    id: record.id,
  });
  if (res.data.code === 0) {
    loadData();
  } else {
    ElMessage({
      message: "操作失败，" + res.data.message,
      type: "error",
    });
  }
};

/**
 * 监听 searchParams 变量，改变时触发数据的重新加载
 */
watchEffect(() => {
  loadData();
});
</script>
